<template>
    <div id="index">
        <dv-full-screen-container class="bg">
            <!--<dv-loading v-if="loading">Loading...</dv-loading>-->
            <div class="host-body">
                <div class="d-flex jc-center">
                    <dv-decoration-10 style="width:33.3%;height:.0625rem;"/>
                    <div class="d-flex jc-center">
                        <dv-decoration-8 :color="['#568aea', '#f0f5f5']" style="width:2.5rem;height:.625rem;"/>
                        <div class="title">
                            <span class="title-text">轨道工程安全控制平台</span>
                            <dv-decoration-6
                                    class="title-bototm"
                                    :reverse="true"
                                    :color="['#50e3c2', '#67a1e5']"
                                    style="width:3.125rem;height:.1rem;"
                            />
                        </div>
                        <dv-decoration-8
                                :reverse="true"
                                :color="['#568aea', '#f0f5f5']"
                                style="width:2.5rem;height:.625rem;"
                        />
                    </div>
                   <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);"/>
                </div>

                <!-- 第二行 -->
                <div class="d-flex jc-between px-2">
                    <div class="d-flex" style="width: 40%">
                        <div
                                class="react-right ml-4"
                                style="width: 6.25rem; text-align: left;background-color: #4ebdf5;"
                        >
                            <span class="react-before"></span>

                        </div>
                        <div class="react-right ml-3" style="background-color: #4ebdf5;">

                        </div>
                    </div>
                    <div style="width: 40%" class="d-flex">
                        <div style="background-color: #4ebdf5" class="react-left bg-color-blue mr-3"></div>
                        <div
                                class="react-left mr-4"
                                style="width: 6.25rem; background-color: #4ebdf5; text-align: right;"
                        >
                            <span class="react-after"></span>
                            <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
                        </div>
                    </div>
                </div>

                <div class="body-box">
                    <!-- 选择 -->
                    <div class="content-box" style="border: solid">
                        <div></div>
                        <div></div>
                        <div>
                            <Choose></Choose>
                        </div>
                        <div></div>
                        <div></div>
                    </div>
                    <div v-show="loading">
                        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
                    </div>
                    <dv-loading v-if="loading">遗传算法正在进行，请稍等...</dv-loading>
                    <div v-show="this.show" v-else>
                        <br/>
                        <br/>
                        <br/>
                        <!-- 第一行图-->
                        <div class="bototm-box">
                            <!--<dv-border-box-13>-->
                                <topLeft/>
                            <!--</dv-border-box-13>-->
                            <!--<dv-border-box-12>-->
                                <!--<topRight/>-->
                            <!--</dv-border-box-12>-->
                            <dv-border-box-3>
                                <div>
                                    <button v-show="flag" type="button" @click="dialogVisible2=true">百分比多选项对比</button>
                                </div>
                                <br/>
                                <br/>
                                <div>
                                    <button v-show="!flag" type="button" @click="dialogVisible3=true">个数多选项对比</button>
                                </div>
                            </dv-border-box-3>
                        </div>
                        <br/>
                        <br/>
                        <br/>
                        <!-- 第二行图 -->
                        <div class="bototm-box">
                            <!--<dv-border-box-13>-->
                                <bottomLeft/>
                            <!--</dv-border-box-13>-->
                            <!--<dv-border-box-12>-->
                                <!--<bottomRight/>-->
                            <!--</dv-border-box-12>-->
                            <dv-border-box-3>
                                <dv-border-box-3>
                                    <div>
                                        <button v-show="flag" type="button" @click="dialogVisible4=true">百分比多选项对比</button>
                                    </div>
                                    <br/>
                                    <br/>
                                    <div>
                                        <button v-show="!flag" type="button" @click="dialogVisible5=true">个数多选项对比</button>
                                    </div>
                                </dv-border-box-3>
                            </dv-border-box-3>
                        </div>
                    </div>

                </div>
            </div>
        </dv-full-screen-container>
        <el-dialog
                :visible="dialogVisible"
                :close-on-click-modal="true"
                @close='dialogVisible=false'
                width="100%" @open="open()">
            <div style="font-size: medium;color: #5daf34;text-align: center">
                数据序号：<span style="font-size: large;color: black">{{this.dataIndex}}</span><br/><br/>
                BTR推理值：<span id="sp1" style="font-size: large;color: black;margin-right: 0.5rem">{{parseFloat(this.info.btrinferenceValues[dataIndex]).toFixed(4)}}</span>
                Stl推理值：<span style="font-size: large;color: black">{{parseFloat(this.info.stlInferenceValues[dataIndex]).toFixed(4)}}</span><br/><br/>
                <!--推理值：<span style="color: black">{{-this.single_data.cotrResult.result}}</span><br/>-->
                BTR优化值：<span style="font-size: large;color: black;margin-right: 0.5rem">{{parseFloat(this.info.btroptimizalValues[dataIndex]).toFixed(4)}}</span>&nbsp;&nbsp;
                Stl优化值：<span style="font-size: large;color: black">{{parseFloat(this.info.stlOptimizalValues[dataIndex]).toFixed(4)}}</span><br/><br/>
                BTR优化效果：<span style="font-size: large;color: black;margin-right: 0.5rem">{{parseFloat(this.info.btrinferenceValues[dataIndex] - this.info.btroptimizalValues[dataIndex]).toFixed(4)}}
                （{{parseFloat((this.info.btrinferenceValues[dataIndex] - this.info.btroptimizalValues[dataIndex])/this.info.btrinferenceValues[dataIndex]*100).toFixed(2)}}%）</span>&nbsp;&nbsp;
                Stl优化效果：<span style="font-size: large;color: black">{{parseFloat(this.info.stlInferenceValues[dataIndex] - this.info.stlOptimizalValues[dataIndex]).toFixed(4)}}
                （{{parseFloat((this.info.stlInferenceValues[dataIndex] - this.info.stlOptimizalValues[dataIndex])/this.info.stlInferenceValues[dataIndex]*100).toFixed(2)}}%）</span><br/><br/>
                <div>
                    <el-form>
                        <el-row :gutter="5">
                            <el-col :span="3" :offset="2">
                                <div id="save1"></div>
                            </el-col>
                            <el-col :span="2">
                                <div id="save2" style="color: black"></div>
                            </el-col>
                            <el-col :span="4">
                                <div id="save3"></div>
                            </el-col>
                            <el-col :span="4">
                                <div id="save4" style="color: black"></div>
                            </el-col>
                            <el-col :span="2">
                                <div id="save5"></div>
                            </el-col>
                            <el-col :span="5">
                                <div id="save6" style="color: black"></div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                贡献度总占比：<span id="all_contr" style="font-size: large;color: black"></span>
            </div>
            <br/><br/>
            <div>
                <div class="bg-color-black">
                    <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
                        <span> 各参数上下限内调整图</span>
                    </div>
                    <div>
                        <Echart
                                :options="options"
                                id="centerChart"
                                height="4.9rem"
                                width="100%"
                        ></Echart>
                    </div>
                </div>
            </div>
            <br/>
            <br/>
            <div>
                <div class="bg-color-black">
                    <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar"></icon>
        </span>
                        <span> Pareto前沿</span>
                    </div>
                    <div>
                        <Echart
                                :options="options2"
                                id="pareto"
                                height="4.9rem"
                                width="100%"
                        ></Echart>
                    </div>
                </div>
            </div>
        </el-dialog>
        <el-dialog
                title="BTR百分比多选项对比"
                :visible="dialogVisible2"
                :close-on-click-modal="true"
                @close='dialogVisible2=false'
                width="100%" @open="open2()">
            <div class="bototm-box">
                <div>
                    <Echart
                            :options="options3"
                            id="BTRDefault"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
                <div>
                    <Echart
                            :options="options4"
                            id="BTRBox"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
            </div>

        </el-dialog>
        <el-dialog
                title="BTR个数多选项对比"
                :visible="dialogVisible3"
                :close-on-click-modal="true"
                @close='dialogVisible3=false'
                width="100%" @open="open3()">
            <div class="bototm-box">
                <div>
                    <Echart
                            :options="options5"
                            id="BTRDefault2"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
                <div>
                    <Echart
                            :options="options6"
                            id="BTRBox2"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
            </div>

        </el-dialog>
        <el-dialog
                title="Stl百分比多选项对比"
                :visible="dialogVisible4"
                :close-on-click-modal="true"
                @close='dialogVisible4=false'
                width="100%" @open="open4()">
            <div class="bototm-box">
                <div>
                    <Echart
                            :options="options7"
                            id="StlDefault"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
                <div>
                    <Echart
                            :options="options8"
                            id="StlBox"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
            </div>

        </el-dialog>
        <el-dialog
                title="Stl个数多选项对比"
                :visible="dialogVisible5"
                :close-on-click-modal="true"
                @close='dialogVisible5=false'
                width="100%" @open="open5()">
            <div class="bototm-box">
                <div>
                    <Echart
                            :options="options9"
                            id="StlDefault2"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
                <div>
                    <Echart
                            :options="options10"
                            id="StlBox2"
                            height="4.6rem"
                            width="100%"></Echart>
                </div>
            </div>

        </el-dialog>
    </div>
</template>

<script>
    import {formatTime} from '../utils/index.js'
    import topLeft from "./topLeft";
    import topRight from "./topRight";
    import bottomLeft from "./bottomLeft";
    import bottomRight from "./bottomRight";
    import Choose from "./Choose"
    import eventBus from "./event-bus"
    import Echart from '@/common/echart'
    import dataTool from 'echarts/extension/dataTool'

    let cat = new Array();
    for (let i = 0; i <= 100; i++) {
        cat[i] = i;
    }

    let paramArr = ["掘进速度", "刀盘转矩", "盾构推力", "刀盘转速", "土仓压力", "灌浆体积"];

    export default {
        data() {
            return {
                choose: "per",
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                dialogVisible4: false,
                dialogVisible5: false,
                dataIndex: 0,
                show: false,
                loading: false,
                dateDay: null,
                dateYear: null,
                dateWeek: null,
                weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
                info: {
                    btroptimizalValues: [],
                    stlOptimizalValues: [],
                    optimizalDatas: [],

                    btrinferenceValues: [],
                    stlInferenceValues: [],
                    realDatas: [],

                    keyParam: [],
                    contribution: [],

                    realpropValue: [],
                    optimizalpropValue: [],

                    pareto: [],

                    defaultDataMap: {
                        inference: {
                            btr: [],
                            stl: []
                        },
                        btrDefault: {
                            per50: [],
                            per60: [],
                            per70: [],
                            per80: [],
                            per90: [],
                            per100: [],

                            num1: [],
                            num2: [],
                            num3: [],
                            num4: [],
                            num5: [],
                            num6: []
                        },
                        stlDefault: {
                            per50: [],
                            per60: [],
                            per70: [],
                            per80: [],
                            per90: [],
                            per100: [],

                            num1: [],
                            num2: [],
                            num3: [],
                            num4: [],
                            num5: [],
                            num6: []
                        }
                    }
                },
                options: {},
                options2: {},
                options3: {},
                options4: {},
                options5: {},
                options6: {},
                options7: {},
                options8: {},
                options9: {},
                options10: {},
            };
        },
        components: {
            topLeft,
            topRight,
            bottomLeft,
            bottomRight,
            Choose,
            Echart
        },
        mounted() {
            this.timeFn()
            eventBus.$on('load', loading => {
                this.loading = loading;
                this.show = true
            })
            eventBus.$on('param', (index) => {
                this.dataIndex = index;
                this.dialogVisible = true

            })
            eventBus.$on('data-figure', info => {
                this.info = info;
            }),
                eventBus.$on('choose', choose => {
                    this.choose = choose;
                })
        },
        methods: {
            timeFn() {
                setInterval(() => {
                    this.dateDay = formatTime(new Date(), 'HH: mm: ss');
                    this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
                    this.dateWeek = this.weekday[new Date().getDay()];
                }, 1000)
            },
            inter: function () {
                let sa1 = document.getElementById("save1");
                let sa2 = document.getElementById("save2");
                let sa3 = document.getElementById("save3");
                let sa4 = document.getElementById("save4");
                let sa5 = document.getElementById("save5");
                let sa6 = document.getElementById("save6");
                let all_contr = document.getElementById("all_contr");

                sa1.innerHTML = "";
                sa2.innerHTML = "";
                sa3.innerHTML = "";
                sa4.innerHTML = "";
                sa5.innerHTML = "";
                sa6.innerHTML = "";
                all_contr.innerHTML = "";

                let sum1 = 0
                let sum2 = 0
                if (this.info.keyParam[this.dataIndex] != null) {
                    for (let i = 0; i < this.info.keyParam[this.dataIndex].length; i++) {
                        sa1.innerHTML += "关键参数" + this.info.keyParam[this.dataIndex][i] + "：" + " <br/><br/>"
                        sa2.innerHTML += paramArr[this.info.keyParam[this.dataIndex][i] - 6] + " <br/><br/>"
                        sa3.innerHTML += "BTR与Stl贡献度：" + " <br/><br/>"
                        sa4.innerHTML += parseFloat(this.info.contribution[this.dataIndex][i][0] * 100).toFixed(2) + "%" + " &nbsp;&nbsp; "
                            + parseFloat(this.info.contribution[this.dataIndex][i][1] * 100).toFixed(2) + "%" + "<br/><br/> "
                        sa5.innerHTML += "数值改变：" + "<br/><br/>"
                        sa6.innerHTML += parseFloat(this.info.realDatas[this.dataIndex][this.info.keyParam[this.dataIndex][i] - 1]).toFixed(4) +
                            "&nbsp; => &nbsp;" + parseFloat(this.info.optimizalDatas[this.dataIndex][this.info.keyParam[this.dataIndex][i] - 1]).toFixed(4) + "<br/><br/>"

                        sum1 = sum1 + this.info.contribution[this.dataIndex][i][0]
                        sum2 = sum2 + this.info.contribution[this.dataIndex][i][1]
                    }
                    all_contr.innerHTML += parseFloat(sum1 * 100).toFixed(2) + "% " + parseFloat(sum2 * 100).toFixed(2) + "%"
                }
            },
            handler() {
                this.options = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: ["控制前", "控制后"],
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "88%",
                        y: "4%"
                    },
                    xAxis: {
                        data: ["掘进速度", "刀盘转矩", "盾构推力", "刀盘转速", "土仓压力", "灌浆体积"],
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    series: [
                        {
                            name: "控制前",
                            type: "bar",
                            clickable: false,
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f561b1"
                                }
                            },
                            data: this.info.realpropValue[this.dataIndex]
                        },
                        {
                            name: "控制后",
                            type: "bar",
                            clickable: false,
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f57d28"
                                }
                            },
                            data: this.info.optimizalpropValue[this.dataIndex]
                        }
                    ]
                },
                    this.options2 = {
                        title: {
                            text: "",
                        },
                        tooltip: {
                            trigger: "axis",
                            backgroundColor: "rgba(255,255,255,0.1)",
                            axisPointer: {
                                type: "shadow",
                                label: {
                                    show: true,
                                    backgroundColor: "#7B7DDC"
                                }
                            }
                        },
                        grid: {
                            x: "8%",
                            width: "88%",
                            y: "4%"
                        },
                        xAxis: {
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisTick: {
                                show: false
                            }
                        },
                        yAxis:
                            {
                                axisLine: {
                                    lineStyle: {
                                        color: "#B4B4B4"
                                    }
                                },
                                scale: true,
                                axisTick: {
                                    show: false
                                }
                            },
                        series: [
                            {
                                name: "",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#f54134"
                                    }
                                },
                                data: this.info.pareto[this.dataIndex]
                            }
                        ]
                    }
            },
            handler2() {
                let temp = new Array();
                temp[0] = this.info.defaultDataMap.inference.btr
                temp[1] = this.info.defaultDataMap.btrDefault.per50
                temp[2] = this.info.defaultDataMap.btrDefault.per60
                temp[3] = this.info.defaultDataMap.btrDefault.per70
                temp[4] = this.info.defaultDataMap.btrDefault.per80
                temp[5] = this.info.defaultDataMap.btrDefault.per90
                temp[6] = this.info.defaultDataMap.btrDefault.per100
                let box_data = dataTool.prepareBoxplotData(temp);
                let line_data = [];
                for(let i=0; i<box_data.boxData.length;i++){
                    line_data.push(box_data.boxData[i][2]);
                }
                /*console.log(line_data);*/
                this.options3 = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: ["控制前", "50%", "60%", "70%", "80%", "90%", "100%"],
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "88%",
                        y: "4%"
                    },
                    xAxis: {
                        data: cat,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    series: [
                        {
                            name: "控制前",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#d73bf5"
                                }
                            },
                            data: this.info.defaultDataMap.inference.btr
                        },
                        {
                            name: "50%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f53d38"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per50
                        },
                        {
                            name: "60%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#5cf556"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per60
                        },
                        {
                            name: "70%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5d441"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per70
                        },
                        {
                            name: "80%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5972c"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per80
                        },
                        {
                            name: "90%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#7cdbf5"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per90
                        },
                        {
                            name: "100%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f0f5f5"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.per100
                        },
                    ]
                },
                    this.options4 = {
                        title:
                            {
                                text: '',
                                left: 'center',
                                textStyle: {
                                    fontSize: 15
                                }
                            },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: {
                            type: 'category',
                            data: ["控制前", "50%", "60%", "70%", "80%", "90%", "100%"],
                            boundaryGap: true,
                            nameGap: 14,
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: true
                            },
                            scale: true
                        },
                        series: [
                            {
                                name: '111',
                                type: 'boxplot',
                                clickable: false,
                                data: box_data.boxData,
                                tooltip: {
                                    formatter: function (param) {
                                        return [
                                            '上限: ' + parseFloat(param.data[5]).toFixed(4),
                                            '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                                            '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                                            '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                                            '下限: ' + parseFloat(param.data[1]).toFixed(4)
                                        ].join('<br/>');
                                    }
                                }
                            },
                            {
                                name: '离群值',
                                type: 'scatter',
                                data: box_data.outliers
                            },
                            {
                                name: "",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#f54134"
                                    }
                                },
                                data: line_data
                            },

                        ]
                    }
            },
            handler3() {
                let temp = new Array();
                temp[0] = this.info.defaultDataMap.inference.btr
                temp[1] = this.info.defaultDataMap.btrDefault.num1
                temp[2] = this.info.defaultDataMap.btrDefault.num2
                temp[3] = this.info.defaultDataMap.btrDefault.num3
                temp[4] = this.info.defaultDataMap.btrDefault.num4
                temp[5] = this.info.defaultDataMap.btrDefault.num5
                temp[6] = this.info.defaultDataMap.btrDefault.num6
                let box_data = dataTool.prepareBoxplotData(temp);
                let line_data = [];
                for(let i=0; i<box_data.boxData.length;i++){
                    line_data.push(box_data.boxData[i][2]);
                }
                this.options5 = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: ["控制前", "num=1", "num=2", "num=3", "num=4", "num=5", "num=6"],
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "88%",
                        y: "4%"
                    },
                    xAxis: {
                        data: cat,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    series: [
                        {
                            name: "控制前",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#d73bf5"
                                }
                            },
                            data: this.info.defaultDataMap.inference.btr
                        },
                        {
                            name: "num=1",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f53d38"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num1
                        },
                        {
                            name: "num=2",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#5cf556"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num2
                        },
                        {
                            name: "num=3",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5d441"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num3
                        },
                        {
                            name: "num=4",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5972c"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num4
                        },
                        {
                            name: "num=5",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#7cdbf5"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num5
                        },
                        {
                            name: "num=6",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f0f5f5"
                                }
                            },
                            data: this.info.defaultDataMap.btrDefault.num6
                        },
                    ]
                },
                    this.options6 = {
                        title:
                            {
                                text: '',
                                left: 'center',
                                textStyle: {
                                    fontSize: 15
                                }
                            },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: {
                            type: 'category',
                            data: ["控制前", "num=1", "num=2", "num=3", "num=4", "num=5", "num=6"],
                            boundaryGap: true,
                            nameGap: 14,
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: true
                            },
                            scale: true
                        },
                        series: [
                            {
                                name: '111',
                                type: 'boxplot',
                                clickable: false,
                                data: box_data.boxData,
                                tooltip: {
                                    formatter: function (param) {
                                        return [
                                            '上限: ' + parseFloat(param.data[5]).toFixed(4),
                                            '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                                            '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                                            '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                                            '下限: ' + parseFloat(param.data[1]).toFixed(4)
                                        ].join('<br/>');
                                    }
                                }
                            },
                            {
                                name: '离群值',
                                type: 'scatter',
                                data: box_data.outliers
                            },
                            {
                                name: "",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#f54134"
                                    }
                                },
                                data: line_data
                            }
                        ]
                    }
            },
            handler4() {
                let temp = new Array();
                temp[0] = this.info.defaultDataMap.inference.stl
                temp[1] = this.info.defaultDataMap.stlDefault.per50
                temp[2] = this.info.defaultDataMap.stlDefault.per60
                temp[3] = this.info.defaultDataMap.stlDefault.per70
                temp[4] = this.info.defaultDataMap.stlDefault.per80
                temp[5] = this.info.defaultDataMap.stlDefault.per90
                temp[6] = this.info.defaultDataMap.stlDefault.per100
                let box_data = dataTool.prepareBoxplotData(temp);
                let line_data = [];
                for(let i=0; i<box_data.boxData.length;i++){
                    line_data.push(box_data.boxData[i][2]);
                }
                this.options7 = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: ["控制前", "50%", "60%", "70%", "80%", "90%", "100%"],
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "88%",
                        y: "4%"
                    },
                    xAxis: {
                        data: cat,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    series: [
                        {
                            name: "控制前",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#d73bf5"
                                }
                            },
                            data: this.info.defaultDataMap.inference.stl
                        },
                        {
                            name: "50%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f53d38"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per50
                        },
                        {
                            name: "60%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#5cf556"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per60
                        },
                        {
                            name: "70%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5d441"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per70
                        },
                        {
                            name: "80%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5972c"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per80
                        },
                        {
                            name: "90%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#7cdbf5"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per90
                        },
                        {
                            name: "100%",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f0f5f5"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.per100
                        },
                    ]
                },
                    this.options8 = {
                        title:
                            {
                                text: '',
                                left: 'center',
                                textStyle: {
                                    fontSize: 15
                                }
                            },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: {
                            type: 'category',
                            data: ["控制前", "50%", "60%", "70%", "80%", "90%", "100%"],
                            boundaryGap: true,
                            nameGap: 14,
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: true
                            },
                            scale: true
                        },
                        series: [
                            {
                                name: '111',
                                type: 'boxplot',
                                clickable: false,
                                data: box_data.boxData,
                                tooltip: {
                                    formatter: function (param) {
                                        return [
                                            '上限: ' + parseFloat(param.data[5]).toFixed(4),
                                            '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                                            '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                                            '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                                            '下限: ' + parseFloat(param.data[1]).toFixed(4)
                                        ].join('<br/>');
                                    }
                                }
                            },
                            {
                                name: '离群值',
                                type: 'scatter',
                                data: box_data.outliers
                            },
                            {
                                name: "",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#f54134"
                                    }
                                },
                                data: line_data
                            }
                        ]
                    }
            },
            handler5() {
                let temp = new Array();
                temp[0] = this.info.defaultDataMap.inference.stl
                temp[1] = this.info.defaultDataMap.stlDefault.num1
                temp[2] = this.info.defaultDataMap.stlDefault.num2
                temp[3] = this.info.defaultDataMap.stlDefault.num3
                temp[4] = this.info.defaultDataMap.stlDefault.num4
                temp[5] = this.info.defaultDataMap.stlDefault.num5
                temp[6] = this.info.defaultDataMap.stlDefault.num6
                let box_data = dataTool.prepareBoxplotData(temp);
                let line_data = [];
                for(let i=0; i<box_data.boxData.length;i++){
                    line_data.push(box_data.boxData[i][2]);
                }
                this.options9 = {
                    title: {
                        text: "",
                    },
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: "rgba(255,255,255,0.1)",
                        axisPointer: {
                            type: "shadow",
                            label: {
                                show: true,
                                backgroundColor: "#7B7DDC"
                            }
                        }
                    },
                    legend: {
                        data: ["控制前", "num=1", "num=2", "num=3", "num=4", "num=5", "num=6"],
                        textStyle: {
                            color: "#B4B4B4"
                        },
                        top: "0%"
                    },
                    grid: {
                        x: "8%",
                        width: "88%",
                        y: "4%"
                    },
                    xAxis: {
                        data: cat,
                        axisLine: {
                            lineStyle: {
                                color: "#B4B4B4"
                            }
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis:
                        {
                            splitLine: {show: false},
                            axisLine: {
                                lineStyle: {
                                    color: "#B4B4B4"
                                }
                            },
                            scale: true,
                            axisLabel: {
                                formatter: "{value} "
                            }
                        },
                    series: [
                        {
                            name: "控制前",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#d73bf5"
                                }
                            },
                            data: this.info.defaultDataMap.inference.stl
                        },
                        {
                            name: "num=1",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f53d38"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num1
                        },
                        {
                            name: "num=2",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#5cf556"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num2
                        },
                        {
                            name: "num=3",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5d441"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num3
                        },
                        {
                            name: "num=4",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f5972c"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num4
                        },
                        {
                            name: "num=5",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#7cdbf5"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num5
                        },
                        {
                            name: "num=6",
                            type: "line",
                            smooth: true,
                            showAllSymbol: true,
                            symbol: "emptyCircle",
                            symbolSize: 5,
                            itemStyle: {
                                normal: {
                                    color: "#f0f5f5"
                                }
                            },
                            data: this.info.defaultDataMap.stlDefault.num6
                        },
                    ]
                },
                    this.options10 = {
                        title:
                            {
                                text: '',
                                left: 'center',
                                textStyle: {
                                    fontSize: 15
                                }
                            },
                        tooltip: {
                            trigger: 'item',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '10%',
                            right: '10%',
                            bottom: '15%'
                        },
                        xAxis: {
                            type: 'category',
                            data: ["控制前", "num=1", "num=2", "num=3", "num=4", "num=5", "num=6"],
                            boundaryGap: true,
                            nameGap: 14,
                            splitArea: {
                                show: false
                            },
                            splitLine: {
                                show: false
                            }
                        },
                        yAxis: {
                            type: 'value',
                            splitArea: {
                                show: true
                            },
                            scale: true
                        },
                        series: [
                            {
                                name: '111',
                                type: 'boxplot',
                                clickable: false,
                                data: box_data.boxData,
                                tooltip: {
                                    formatter: function (param) {
                                        return [
                                            '上限: ' + parseFloat(param.data[5]).toFixed(4),
                                            '上四分位数: ' + parseFloat(param.data[4]).toFixed(4),
                                            '中位数: ' + parseFloat(param.data[3]).toFixed(4),
                                            '下四分位数: ' + parseFloat(param.data[2]).toFixed(4),
                                            '下限: ' + parseFloat(param.data[1]).toFixed(4)
                                        ].join('<br/>');
                                    }
                                }
                            },
                            {
                                name: '离群值',
                                type: 'scatter',
                                data: box_data.outliers
                            },
                            {
                                name: "",
                                type: "line",
                                smooth: true,
                                showAllSymbol: true,
                                symbol: "emptyCircle",
                                symbolSize: 5,
                                itemStyle: {
                                    normal: {
                                        color: "#f54134"
                                    }
                                },
                                data: line_data
                            }
                        ]
                    }
            },
            open() {
                this.$nextTick(() => {
                    this.handler()
                    this.inter();
                })
            },
            open2() {
                this.$nextTick(() => {
                    this.handler2()
                })
            },
            open3() {
                this.$nextTick(() => {
                    this.handler3()
                })
            },
            open4() {
                this.$nextTick(() => {
                    this.handler4()
                })
            },
            open5() {
                this.$nextTick(() => {
                    this.handler5()
                })
            },
        }
        ,
       computed: {
            flag() {
                return this.choose == "per" ? true : false
            }
       }
    }
    ;
</script>

<style lang="scss">
    @import '../assets/scss/index.scss';

    .el-dialog {

        background: #196942;

    }
</style>